<template>
  <view class="pageBg">
    <custom-header></custom-header>
    <view
      class="classify-container"
      :style="{ 'padding-top': fillHeight ? fillHeight + 'px' : '100rpx' }"
    >
      <theme-item v-for="i in classifyList" :key="i._id" :data="i"></theme-item>
    </view>
    <view class="pt-2 pb-2">
      <uni-load-more :status="status"></uni-load-more>
    </view>
    <view class="safe-bottom"></view>
  </view>
</template>

<script setup>
import { ref, onMounted, computed } from "vue";
import { useNavBarHeight } from "../../hooks";
import { getAllWallpaperClassifyService } from "../../api/index";
import { onReachBottom } from "@dcloudio/uni-app";
const pageSize = 13;
const current = ref(1);
const classifyList = ref([]);
const finishdeLoad = ref(false);
const isLoading = ref(false);

const { fillHeight } = useNavBarHeight();

const fetchClassify = (pageNum = 1) => {
  isLoading.value = true;
  getAllWallpaperClassifyService({ pageNum, pageSize })
    .then((res) => {
      classifyList.value = classifyList.value.concat(res.data);
      if (res.data.length === 0) {
        finishdeLoad.value = true;
      }
    })
    .finally(() => {
      isLoading.value = false;
    });
};

const status = computed(() => {
  if (isLoading.value) {
    return "loading";
  } else if (finishdeLoad.value) {
    return "noMore";
  } else {
    return "more";
  }
});
onMounted(() => {
  fetchClassify();
});
onReachBottom(() => {
  if (finishdeLoad.value !== true) {
    current.value++;
    fetchClassify(current.value);
  }
});
</script>

<style lang="less" scoped>
.classify-container {
  padding: 0 25rpx;
  display: flex;
  justify-content: space-between;
  flex-shrink: 0;
  flex-wrap: wrap;
}
</style>
